<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0  maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>渠道信息</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="icon_font/iconfont.css">
</head>
<style>
    body {
        background-color: #eff3f6;
        font-size: 18px;
    }

    header {
        background-color: #fff;
        border-bottom: 1px solid #eff3f6;
        padding: 10px;
        box-sizing: border-box;
    }

    header h3 {
        margin: 0;
        position: absolute;
        left: 50%;
        top: 2%;
        transform: translateX(-50%);
    }

    .white {
        font-size: 24px;
    }

    .big_group {
        border-bottom: 1px solid #eff3f6;
        padding-bottom: 10px;
    }

    .big_group img {
        width: 60px;
        height: 60px;
    }

    .big_group text {
        margin-left: 20px;
    }

    .group {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-bottom: 1px solid #eff3f6;
        padding: 10px;

    }

    .group img {
        width: 50px;
        height: 50px;
    }

    .gray {
        color: gray;
    }

    input {
        border: none;
        text-align: right;
        outline: none;
    }

    .btn-info.active {
        background-color: transparent;
        border-color: transparent;
        color: #000;
    }

    .btn.active {
        box-shadow: none;

    }

    .btn-info {
        background-color: transparent;
        border-color: transparent;
    }

    .btn-lg {
        padding: 0;
    }

    .red {
        background-color: #FF3366;
        color: #fff;
        border-radius: 20px;
        margin-top: 40px;
        width: 90%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .form-control {
        width: 71px;
        padding: 0;
    }

    .form-group {
        margin-bottom: 0;
    }

    .aaa select {
        border: none;
        outline: none;
        border: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        direction: rtl;
        text-align: center;
        background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll rightright center transparent;
    }

    .aaa select::-ms-expand {
        display: none;
    }

    select option {
        text-align: center;
    }
</style>

<body>
    <div>
        <header>
            <i class="iconfont white  icon-zuojiantou"></i>
            <h3>推荐房源</h3>
        </header>
        <div class="group" style="box-sizing: border-box;">
            <text class="gray"><span style="color:#FF3366">*</span>省市区</text>
            <form class="form-inline">
                <div data-toggle="distpicker" style="display: flex;">
                    <div class="form-group" style="margin-right: 10px;">
                        <select class="form-control" id="province2" data-province="选择省"></select>
                    </div>
                    <div class="form-group" style="margin-right: 10px;">
                        <select class="form-control" id="city2" data-city="选择市"></select>
                    </div>
                    <div class="form-group">
                        <select class="form-control" id="district2" data-district="选择区"></select>
                    </div>
                </div>
            </form>
        </div>
        <div class="group aaa">
            <text class="gray"> <span style="color:#FF3366">*</span>商圈</text>
            <select id="seleect">
                <option>请选择</option>
            </select>
        </div>
        <div class="group aaa">
            <text class="gray"><span style="color:#FF3366">*</span>小区</text>
            <select id="seleect2">
                <option>请选择</option>
            </select>
        </div>

        <div class="group" style="margin-top: 15px;">
            <text class="gray"><span style="color:#FF3366">*</span>业主手机</text>
            <input placeholder="请填写业主联系方式" id="phone"></input>
        </div>
        <div class="group">
            <text class="gray"><span style="color:#FF3366">*</span>业主称呼</text>
            <input placeholder="如: 刘先生" id="name"></input>
        </div>
        <div class="group" style="margin-top: 15px;">
            <text class="gray">卧室</text>
            <input placeholder="请填写卧室数量" id="woshi"></input>
        </div>
        <div class="group">
            <text class="gray">客厅</text>
            <input placeholder="请填写客厅数量" id="keting"></input>
        </div>
        <div class="group">
            <text class="gray">卫生间</text>
            <input placeholder="请填写卫生间数量" id="weishengjian"></input>
        </div>
        <div class="group">
            <text class="gray">房屋面积</text>
            <input placeholder="请填写房屋面积" id="house"></input>
        </div>
        <div class="group" style="margin-top: 15px;">
            <text class="gray">备注</text>
            <input placeholder="请填写房屋备注信息" id="phone"></input>
        </div>
    </div>
    <button type="button" class="red" id="save">确认提交</button>

</body>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
<script src="js/main.js"></script>
<script>
    var e;
    $("#district2").change(function () {
        var options = $('#district2 option:selected')
        $('#seleect').empty()
        e = options[0].innerText // 区名
        let a = options[0].outerHTML
        let b = a.split('-', 2)
        let c = b[1].split('"', 2)
        d = c[1]
        $.ajax({
            url: 'http://9527.utools.club/wx/api/serch_business_circle',
            type: 'post',
            data: { bc_area_id: d },
            success: (res) => {
                let arr = JSON.parse(res)
                let b = arr.data

                console.log(b.length)
                if (b.length == 0) {
                    $("#seleect").append(`<option>暂无房源</option>`)
                } else {
                    b.forEach((item, i) => {
                        console.log(item)
                        $("#seleect").append(`<option value="${item.bc_id}">${item.bc_name}</option>`)
                    })
                }

            }
        })

    })
    var sheng;
    $("#province2").change(function () {
        sheng = $('#province2 option:selected').text()
        console.log(sheng)
    })
    var shi;
    $("#city2").change(function () {
        shi = $('#city2 option:selected').text()
        console.log(shi)
    })
    var hr_bc_id;
    $("#seleect").change(function () {
        $("#seleect2").empty()
        let rq_bc_id = $('#seleect').val()
        hr_bc_id = rq_bc_id
        $.ajax({
            url: 'http://9527.utools.club/wx/api/serch_residential_quarters',
            type: 'post',
            data: {
                rq_bc_id
            },
            success: (res) => {
                let a = JSON.parse(res)
                console.log(a)
                let b = a.data
                b.forEach(item => {
                    $('#seleect2').append(`<option value="${item.rq_id}">${item.rq_name}</option>`)
                })
            }
        })
    })
    $("#save").bind('click', function () {
        console.log(d)
        var hr_rq_id = $("#seleect2").val() //小区id
        let hr_city = sheng + shi + e
        let hr_owner = $('#name').val()
        let hr_owner_phone = $('#phone').val()
        let hr_house_area = $('#house').val()
        let hr_room_number = $('#woshi').val()
        let hr_parlour_number = $('#keting').val()
        let hr_toilet_number = $('#weishengjian').val()
        $.ajax({
            url: 'http://9527.utools.club/wx/channel/add_apartment',
            type: 'post',
            data: {
                hr_bc_id,//商圈id
                hr_rq_id,//小区id
                hr_city,
                hr_owner,
                hr_owner_phone,
                hr_house_area,
                hr_room_number,
                hr_parlour_number,
                hr_toilet_number,
            },
            success: (res) => {
                console.log(res)
                // window.location.href='recommendhouse.html'
            }
        })
    })

</script>

</html>